<template>
  <div id="mine">
    <div class="header">
      <div class="user">
        <div class="photo">
          <img
            style="width: 100%; height: 100%; border-radius: 50%"
            :src="userInfo.face"
          />
        </div>
        <p class="name">{{ userInfo.nickname }}</p>
      </div>
    </div>
    <div class="menu">
      <van-cell
        title="个人资料"
        is-link
        icon="user-o"
        style="font-size: 16px; color: #636363"
        @click="toInfo"
      />
      <van-cell
        title="常用地址"
        is-link
        icon="location-o"
        style="font-size: 16px; color: #636363"
        @click="toAddress"
      />
      <van-cell
        title="联系客服"
        is-link
        icon="phone-o"
        style="font-size: 16px; color: #636363"
        @click="callUs"
      />
    </div>
    <div class="exit">
      <van-button
        round
        type="info"
        @click="logOut"
        color="linear-gradient(90deg, #f85959, #ffc773)"
        style="width: 231px; font-size: 16px"
        >退出登录</van-button
      >
    </div>
    <van-action-sheet v-model="Recharge" title="充值">
      <div class="rechargeWay">
        <van-form>
          <van-field
            v-model="rechargeNum"
            name="充值金额"
            label="充值金额"
            placeholder="请输入充值金额"
            :rules="[
              {
                required: true,
                message: '充值金额不能为空,单次充值金额不能超过1000元',
              },
            ]"
          />
          <div style="margin: 16px">
            <van-button round block type="info" @click="onSubmit(rechargeNum)"
              >提交</van-button
            >
          </div>
        </van-form>
      </div>
    </van-action-sheet>
    <van-dialog show-cancel-button></van-dialog>
  </div>
</template>

<script>
import { get } from "@/http/axios";
import { mapActions, mapState } from "vuex";
import Vue from "vue";
import { Dialog } from "vant";
import { Notify } from "vant";
Vue.use(Dialog);
export default {
  data() {
    return {
      mineData: {},
      Recharge: false,
      rechargeNum: "",
      userInfo: JSON.parse(localStorage.getItem('userInfo'))
    };
  },
  methods: {
    toAddress(){
      this.$router.push('address')
    },
    toInfo(){
      this.$router.push('userInfo')
    },
    callUs() {
      Dialog.alert({
        title:"联系我们",
        message: "手机:18078387138<br>QQ:1591995136",
        theme: "round-button",
      }).then(() => {
        
      });
    },
    logOut() {
      Dialog.confirm({
        message: "是否退出登录？",
      })
        .then(() => {
          this.$router.push("/Login");
        })
        .catch(() => {});
    },
  },
  computed: {

  },
  created() {
  },
};
</script>

<style scoped>
#mine {
  height: 100%;
}
.header {
  height: 140px;
  background-image: linear-gradient(90deg, #f85959, #ffc773);
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
}
.header .user {
  width: 80%;
  height: 120px;
  background-color: #fff;
  position: absolute;
  top: 170px;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.95;
  box-shadow: 0 0 10px #ccc;
  border-radius: 8px;
  padding: 0 1em;
}
.photo {
  width: 95px;
  height: 95px;
  border-radius: 50%;
  background-color: #bf73ff;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
}
.name {
  width: 50%;
  height: 100px;
  margin: 0 auto;
  margin-top: 0px;
  margin-top: 3.5em;
  text-align: center;
  font-size: 20px;
  z-index: 200;
}
.balance_text {
  margin-top: 15px;
  font-size: 16px;
  color: #999;
}
.balance {
  top: -90px;
  width: 24%;
  height: 40px;
  text-align: center;
  cursor: pointer;
  position: relative;
}
.balance_num {
  font-size: 22px;
  margin-top: -10px;
  color: #7579ff;
}
.money {
  display: flex;
  justify-content: space-around;
  margin-top: 1em;
}
.recharge {
  top: -70px;
  width: 24%;
  height: 40px;
  text-align: center;
  cursor: pointer;
  position: relative;
}
.menu {
  margin: 130px auto;
  box-shadow: 4px 4px 4px 0 rgba(158, 117, 255, 0.2);
  transition: 0.3s;
  width: 95%;
  border-radius: 5px;
}
.exit {
  width: 53%;
  height: 40px;
  text-align: center;
  color: #fff;
  border-radius: 22px;
  line-height: 40px;
  margin: 0 auto;
  margin-top: 0px;
  margin-top: 2em;
  cursor: pointer;
}
</style>